<template>
  <div class="grammartype">
    <v-header :back-display="true" :path="path">
      <div slot="title">语法训练</div>
    </v-header>

    <div class="title">
      <p>选择题目类型</p>
    </div>
    <div class="box">
      <div class="box-con">
        <v-selected
          label="题库分类"
          placeholder="点击选择题库"
          v-model="topic"
          :columns="columns1"
          :option="{ label: 'name', value: 'id' }"
          @confirm="confirm1"
        >
        </v-selected>
        <v-selected
          label="目标分类"
          placeholder="点击选择目标"
          v-model="target"
          :columns="columns2"
          :disabled="isdisabled2"
          :option="{ label: 'name', value: 'id' }"
          @confirm="confirm2"
        >
        </v-selected>
        <v-selected
          label="题型分类"
          placeholder="点击选择题型"
          v-model="subject"
          :columns="columns3"
          :disabled="isdisabled3"
          :option="{ label: 'name', value: 'id' }"
          @confirm="confirm3"
        >
        </v-selected>
        <div class="clearfix btn">
          <van-button type="info" @click="toTrain">进入训练</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import header from "@/components/main/header";
import selected from "@/components/content/selected";
import { Field, Button, Toast } from "vant";

export default {
  name: "Grammartype",
  components: {
    "v-header": header,
    "v-selected": selected,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast,
  },
  data() {
    return {
      path: "home",
      isdisabled2: true, //目标分类是否禁用
      isdisabled3: true, //题型分类是否禁用
      topic: "", // 题库默认选中的索引值
      target: "", // 目标默认选中的值
      columns2: [],
      subject: "", // 题型默认选中的值
      columns3: [],
      formlist: {
        // 进入训练传入一个对象
        topic: "",
        target: "",
        subject: "",
      },
      // 如果可选数据不是label-value,需要配置下option
      columns1: [
        {
          name: "CET大学公共英语等级考试",
          id: 1,
          other: "额外数据",
          columns2: [
            {
              name: "CET-4",
              id: 11,
              other: "额外数据",
              columns3: [
                { name: "语法训练", id: 111, other: "额外数据" },
              ],
            },
            {
              name: "CET-6",
              id: 12,
              other: "额外数据",
              columns3: [
                { name: "语法", id: 121, other: "额外数据" },
              ],
            },
          ],
        },

        {
          name: "高职高专英语应用能力考试",
          id: 2,
          other: "额外数据",
          columns2: [
            {
              name: "CET-4",
              id: 21,
              other: "额外数据",
              columns3: [
                { name: "语法训练", id: 211, other: "额外数据" },
              ],
            },
            { name: "CET-6", id: 22, other: "额外数据" },
          ],
        },

        { name: " 广东外语外贸大学", id: 3, other: "额外数据" },
        { name: "贵阳中医药大学", id: 4, other: "额外数据" },
        { name: "TEM专业英语等级考试", id: 5, other: "额外数据" },
        { name: "河海大学", id: 6, other: "额外数据" },
        { name: "东营职业技术学院", id: 7, other: "额外数据" },
        { name: "贵州师范大学求是学院外语系", id: 8, other: "额外数据" },
      ],
    };
  },
  created() {},
  computed: {},
  methods: {
    // 题库分类
    confirm1(data1, index, id) {
      // tips 正常获取值，用不到这个方法，用v-model获取值即可，这个方法是告诉你，可以获取任何你想要的数据
      // data1 当前这一条的obj数据
      // index 当前选择的索引
      // id 当前这一条数据的 value:id
      this.isdisabled2 = false;
      this.isdisabled3 = true;
      // 数组对象赋值
      this.columns2 = this.columns1[index].columns2;
      // 题库分类的内容
      this.formlist.topic = this.columns1[index].name;
      console.log(data1, "当前索引1:", index, "当前id1:", id);
    },

    // 目标分类
    confirm2(data1, index, id) {
      this.isdisabled3 = false;
      this.columns3 = this.columns2[index].columns3;
      // 目标分类的内容
      this.formlist.target = this.columns2[index].name;
      console.log(data1, "当前索引2:", index, "当前id2:", id);
    },

    // 题型分类
    confirm3(data1, index, id) {
      // 题型分类的内容
      this.formlist.subject = this.columns3[index].name;
      console.log(data1, "当前索引3:", index, "当前id3:", id);
    },

    // 进入训练
    toTrain() {
      if (!this.formlist.topic) {
        Toast("请选择题库分类");
      } else if (!this.formlist.target) {
        Toast("请选择目标分类");
      } else if (!this.formlist.subject) {
        Toast("请选择题型分类");
      } else {
        console.log("提交三级联动", this.formlist);
        switch (this.formlist.subject) {
          case "语法训练":
            this.$router.push({ path: "/home/grammar" });
            break;
        }
      }
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.title {
  padding: 15px;
  p {
    color: #333;
    font-size: 16px;
    margin: 0;
  }
}
.box {
  margin: 0 15px;
  border: 1px dashed #bbbbbb;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  .box-con {
    padding: 10px 0 45px;
  }
}
.btn {
  padding-right: 16px;
  padding-top: 20px;
}
.van-button--info {
  background-color: #ff8333;
  border-color: #ff8333;
  font-size: 13px;
  float: right;
  height: 32px;
  line-height: 32px;
}
</style>
